<template>
  <div class="page">
    <div class="s-head">
      <van-collapse v-model="alone.activeNames">
        <van-collapse-item title="搜索" name="1">
          <van-cell
            title="选择开始日期"
            is-link
            :value="alone.searchForm.data.startDate || '无'"
            @click="rTriggerSearchStartDatepicker"
          />
          <van-cell
            title="选择结束日期"
            is-link
            :value="alone.searchForm.data.endDate || '无'"
            @click="rTriggerSearchEndDatepicker"
          />
          <van-row>
            <van-col span="12" :offset="6">
              <van-button type="info" block @click="rSubmitSearchForm"
                >搜索</van-button
              >
            </van-col>
          </van-row>
        </van-collapse-item>
      </van-collapse>

      <nut-datepicker
        :is-visible="searchStartDatepickerCp.config.isVisible"
        title="请选择日期"
        type="date"
        startDate="2020-03-06"
        endDate="2050-10-05"
        @close="rSearchStartDatepickerCpClose"
        @choose="rSearchStartDatepickerCpChange"
      >
      </nut-datepicker>
    </div>
    <div class="s-body">
      <div class="a-content">
        <div class="a-heading" v-if="alone.channelName">
          渠道名称：{{ alone.channelName }}
        </div>
        <van-row class="a-title">
          <van-col span="6">总提交人数</van-col>
          <van-col span="6">第一步提交人数</van-col>
          <van-col span="6">第二步提交人数</van-col>
          <van-col span="6">日期</van-col>
        </van-row>
        <van-row v-for="item in pageAjax.data" :key="item.id" class="a-main">
          <van-col span="6">{{ item.count }}</van-col>
          <van-col span="6">{{ item.submit1Count }}</van-col>
          <van-col span="6">{{ item.submit2Count }}</van-col>
          <van-col span="6">{{ item.submitDate || "无" }}</van-col>
        </van-row>
      </div>
      <div v-if="!!pageAjax.paging.total">
        <van-pagination
          v-model="pageAjax.paging.current"
          :page-count="pageAjax.paging.pages"
          mode="simple"
          @change="rChangePage"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { getActorListOnH5 } from "@/api/info.js";
import _ from "lodash";

export default {
  data() {
    return {
      pageAjax: {
        btnDisabled: false,
        btnLoading: false,
        loading: false,
        lock: false,
        paging: {
          pages: 1, // 总页数
          current: 0, // 当前页
          total: 0, // 总数量
          pageSize: 10 // 每页数量
        },
        data: []
      },
      alone: {
        currentSearchTime: "start",
        activeNames: [],
        channelName: "",
        searchForm: {
          data: {
            startDate: "",
            endDate: ""
          }
        }
      },
      searchStartDatepickerCp: {
        config: {
          isVisible: false
        }
      }
    };
  },
  created() {
    this.getPageData();
  },
  methods: {
    rTriggerSearchStartDatepicker() {
      this.alone.currentSearchTime = "start";
      this.searchStartDatepickerCp.config.isVisible = true;
    },
    rTriggerSearchEndDatepicker() {
      this.alone.currentSearchTime = "end";
      this.searchStartDatepickerCp.config.isVisible = true;
    },
    rSearchStartDatepickerCpChange(e) {
      let t = e[3];
      if (this.alone.currentSearchTime == "start") {
        this.alone.searchForm.data.startDate = t;
      } else {
        this.alone.searchForm.data.endDate = t;
      }
    },
    rSearchStartDatepickerCpClose() {
      this.searchStartDatepickerCp.config.isVisible = false;
    },
    rSubmitSearchForm() {
      let _that = this;
      if (_that.pageAjax.loading) {
        return;
      }

      _that.pageAjax.lock = false;
      _that.pageAjax.paging.current = 0;
      _that.getPageData();
    },
    rChangePage(e) {
      let _that = this;
      if (_that.pageAjax.loading || _that.pageAjax.lock) {
        return;
      }
      _that.pageAjax.paging.current = e;
      _that.getPageData();
    },
    getPageData() {
      let _that = this;
      let searchForm = _.cloneDeep(_that.alone.searchForm);
      let pageAjax = _that.pageAjax;

      if (pageAjax.loading || pageAjax.lock) {
        return;
      }
      let data = { ...searchForm.data };
      data.pageNo = _that.pageAjax.paging.current;
      data.pageSize = _that.pageAjax.paging.pageSize;
      _that.pageAjax.loading = true;

      getActorListOnH5({ params: data })
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            _that.pageAjax.data = respData.data.list;
            if (!_that.alone.channelName && _that.pageAjax.data.length) {
              _that.alone.channelName = _that.pageAjax.data[0].channelName;
              // console.log("d", _that.alone.channelName);
            }
            _that.pageAjax.paging = {
              pages: respData.data.pagination.pages,
              current: respData.data.pagination.current,
              total: respData.data.pagination.total,
              pageSize: respData.data.pagination.pageSize
            };
          } else {
            _that.$toast.fail(respData.msg || "获取失败");
          }
        })
        .finally(() => {
          _that.pageAjax.loading = false;
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  font-size: 28px;
  .a-heading {
    text-align: center;
    font-weight: 700;
  }
  .a-title {
    margin-top: 20px;
    font-weight: 700;
    text-align: center;
    color: #999;
  }
  .a-main {
    text-align: center;
  }
}
</style>
